<script lang="ts" setup>
import { ref } from 'vue'
import AppLocalePicker from '@/page/Home/comp/AppLocalePicker.vue'
import HomeNav from '@/page/Home/comp/HomeNav.vue'

// const { t } = useI18n()
const open = ref(false)
</script>
<template>
  <header class="HeaderNav">
    <div class="h_bar">
      <div class="h_logo">
        <router-link to="/">
          <img src="@/assets/img/logos/logo.png" alt="PLAYTIMEcoin logo" />
        </router-link>
      </div>
      <div class="h_right">
        <AppLocalePicker
          class="h_local_btn"
          style="margin-right: 28px; height: 28px; border-radius: 0.2rem"
        />
        <HomeNav class="HomeNav" @select="open = false"></HomeNav>
        <div class="h_nav_btn">
          <button @click="open = !open">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              ></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <nav class="h_nav_list" :class="{ show_list: open }">
      <div class="wrap">
        <HomeNav @select="open = false"></HomeNav>
      </div>
    </nav>
  </header>
</template>

<style lang="less" scoped>
.HeaderNav {
  padding: 0 16px;
  position: sticky;
  top: 0;
  transform: translateZ(0);
  z-index: 50;
  background-color: #181818bb;
  backdrop-filter: blur(12px);
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  tab-size: 4;
  /* stylelint-disable value-list-comma-newline-after */
  /* stylelint-disable-next-line declaration-colon-newline-after */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
  text-align: start;
  font-size: 16px;
  color: rgb(255, 251, 240);

  ::v-deep(a) {
    color: inherit;
    text-decoration: inherit;
  }

  .h_local_btn {
    border-width: 1px;
    border-color: currentcolor;
    padding: 0 8px;
  }

  .h_bar {
    display: flex;
    height: 82px;
    position: relative;
    z-index: 2;
  }

  .h_logo {
    display: flex;
    align-items: center;

    img {
      height: 20px;
    }
  }

  .h_right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .HomeNav {
      display: none;
    }
  }

  .h_nav_btn {
    button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background-color: rgb(24 24 24);
      border-radius: 12px;
    }

    svg {
      width: 24px;
      height: 24px;
    }
  }

  .h_nav_list {
    // display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #181818;
    z-index: 1;
    font-size: 20px;
    line-height: 28px;
    transform: translateY(-100%);
    transition: transform 0.5s;
    height: 100vh;

    &.show_list {
      transform: translate(0);
    }

    .wrap {
      width: 100%;
      // margin-top: 82px;
      position: absolute;
      top: 82px;
      bottom: 0;
      overflow: auto;
    }

    ul {
      width: 100%;
      text-align: center;
    }

    &::v-deep(li) {
      margin: 32px 0;
    }
  }
}

@media (min-width: 640px) {
  .HeaderNav {
    padding: 0 24px;
  }
}

@media (min-width: 768px) {
  .HeaderNav {
    padding: 0 32px;
  }
}

@media (min-width: 1024px) {
  .HeaderNav {
    .h_right {
      .HomeNav {
        display: flex;
        gap: 32px;
      }
    }

    .h_nav_btn {
      display: none;
    }
  }
}

@media (min-width: 1280px) {
  .HeaderNav {
    .h_bar {
      margin: 0 auto;
      margin-top: 16px;
      max-width: 1280px;
    }
  }
}
</style>
